<template>
	<div class="auxiliarysegmentationstyle">
		<!-- 标题 -->

		<!-- 表单 -->
		<el-form label-width="80px" :model="$store.state.$currentproperties" size="small" label-position="right">
			<!-- 空白高度 -->

			<el-form-item label="空白高度">
				<el-slider v-model="$store.state.$currentproperties.blankHeight" :max="100" input-size="mini" >
				</el-slider>
			</el-form-item>

			<div style="height: 20px" />

			<!-- 分割类型 -->
			<el-form-item label="分割类型">
				<div class="weiz">
					<el-tooltip effect="dark" :content="index - 1 === 0 ? '辅助空白' : '辅助线'" placement="bottom"
						v-for="index in 2" :key="index">
						<i class="iconfont" :class="[
                index - 1 === 0
                  ? 'icon-fuzhukongbai_weixuanzhong'
                  : 'icon-fuzhuxiantiao',
                $store.state.$currentproperties.segmentationtype === index - 1 ? 'active' : '',
              ]" @click="$store.state.$currentproperties.segmentationtype = index - 1" />
					</el-tooltip>
				</div>
			</el-form-item>

			<div style="height: 20px" />

			<!-- 选择样式 -->
			<el-form-item v-show="$store.state.$currentproperties.segmentationtype === 1" label="实线虚线">
				<div class="weiz">

					<el-switch v-model="$store.state.$currentproperties.dashed">
					</el-switch>

				</div>

			</el-form-item>

			<div v-show="$store.state.$currentproperties.segmentationtype === 1" style="height: 20px" />

			<!-- 左右边距 -->
			<el-form-item v-show="$store.state.$currentproperties.segmentationtype === 1" label="左右边距">
				<div class="weiz">
					<el-tooltip effect="dark" :content="index - 1 === 0 ? '无边距' : '左右留边'" placement="bottom"
						v-for="index in 2" :key="index">
						<i class="iconfont" :class="[
                index - 1 === 0
                  ? 'icon-icon_wubianju'
                  : 'icon-icon_zuoyoubianju',
                $store.state.$currentproperties.paddType === index - 1 ? 'active' : '',
              ]" @click="$store.state.$currentproperties.paddType = index - 1" />
					</el-tooltip>
				</div>
			</el-form-item>

			<div v-show="$store.state.$currentproperties.segmentationtype === 1" style="height: 20px" />

			<!-- 辅助线颜色 -->
			<el-form-item v-show="$store.state.$currentproperties.segmentationtype === 1" label="辅助线颜色">
				<!-- 辅助线颜色 -->
				<el-color-picker v-model="$store.state.$currentproperties.auxliarColor" show-alpha class="picke" :predefine="predefineColors">
				</el-color-picker>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	export default {
		name: 'auxiliarysegmentationstyle',
		props: {
			// $store.state.$currentproperties: Object,
		},
		data() {
			return {
				predefineColors: [
					// 颜色选择器预设
					'#ff4500',
					'#ff8c00',
					'#ffd700',
					'#90ee90',
					'#00ced1',
					'#1e90ff',
					'#c71585',
					'#409EFF',
					'#909399',
					'#C0C4CC',
					'rgba(255, 69, 0, 0.68)',
					'rgb(255, 120, 0)',
					'hsv(51, 100, 98)',
					'hsva(120, 40, 94, 0.5)',
					'hsl(181, 100%, 37%)',
					'hsla(209, 100%, 56%, 0.73)',
					'#c7158577',
				],
				borderType: [
					//线类型
					{
						icon: 'icon-icon_fengexian_shixian',
						text: '实线',
						type: 'solid',
					},
					{
						icon: 'icon-xuxian',
						text: '虚线',
						type: 'dashed',
					},
					{
						icon: 'icon-dianxian--',
						text: '点线',
						type: 'dotted',
					},
				],
			}
		},
	}
</script>

<style scoped lang="less">
	.auxiliarysegmentationstyle {
		

		/* 颜色选择器 */
		.picke {
			float: right;
		}

		/* 图片样式 */
		.weiz {
			text-align: right;

			i {
				padding: 5px 12px;
				margin-left: 10px;
				border-radius: 0;
				border: 1px solid #ebedf0;
				font-size: 20px;
				font-weight: 500;
				cursor: pointer;

				&:last-child {
					font-size: 22px;
				}

				&.active {
					color: #155bd4;
					border: 1px solid #155bd4;
					background: #e0edff;
				}
			}
		}
	}
</style>